<template>
  <Dialog :visible="visible" width="65%" :title="$t('批量编辑短信')"
          @confirm="confirm"
          @close="close" @cancel="close">
    <Table :table-data="tableData" max-height="600px" :tableColumn="tableColumn" :page="false" border>
      <template slot="productName" slot-scope="{row}" >
        {{row.appName || row.benefitApp || row.marketApp || row.marketAppName }}
      </template>
      <template slot="content" slot-scope="{row}">
        <el-input type="textarea" v-model="row.smsMsg" :rows="4"/>
      </template>
      <template slot="time" slot-scope="{row}">
        <el-date-picker
            style="width:100%"
            :clearable="false"
            v-model="row.sendTime"
            value-format="yyyy-MM-dd HH:mm"
            popper-class="sendTimeClass"
            :picker-options="{
                disabledDate(time) {
                     return time.getTime() <= (Date.now() - (24 * 60 * 60 * 1000));
                }}"
            type="datetime"
        >
        </el-date-picker>
      </template>
    </Table>
  </Dialog>
</template>

<script>
import {deepClone} from "@/utils/tools";
import {dataBatchEditSms,sharedBatchEditSms,reborrowBatchEditSms,flowBatchEditSms,conversionBatchEditSms} from "@/api/marketing"

export default {
  name: "batchEditSms",
  props: ['visible', 'data', 'type'],
  data() {
    return {
      tableColumn: [
        {label: this.$t('营销APP'), prop: 'productName',slot:'productName'},
        {label: this.$t('短信内容'), prop: 'smsMsg', minWidth: 300, slot: 'content'},
        {label: this.$t('短信渠道'), prop: 'smsName',},
        {label: this.$t('发送时间'), prop: 'sendTime', minWidth: 200, slot: 'time'},
      ],
      tableData: []
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.tableData = deepClone(this.data)
        console.log(this.tableData)
      }
    }
  },
  methods: {
   async  confirm() {
      const params = this.tableData.map(item => {
        const _v = {
          productName: item.productName || item.benefitApp || item.marketApp || item.marketAppName,
          sendTime: item.sendTime,
          msg: item.smsMsg,
          id:item.id
        }
        return _v
      })
      const api = (params) => {
        // type 1数据营销 2共享营销 3复借营销 4流量营销 5转换营销
        if (this.type === 1) {
          return dataBatchEditSms(params);
        } else if (this.type === 2) {
          return sharedBatchEditSms(params)
        }else if (this.type === 3) {
          return reborrowBatchEditSms(params)
        }else if (this.type === 4) {
          return flowBatchEditSms(params)
        } else if (this.type === 5) {
          return conversionBatchEditSms(params)
        }
      }
      const res = await api(params)
      if (res.code === 1) {
        this.$message.success(this.$t('批量编辑成功'))
        this.close()
        this.$emit('batchChange')
      }
    },
    close() {
      this.tableData = []
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style scoped>

</style>
